<template>
	<view class='content'>
		<view class="tabs">
			<u-tabs itemStyle="width: 150px; height: 50px;" lineWidth='150px' :list="tabs" @click="tabClick"></u-tabs>
		</view>
		<view class="search">
			<u--input
				placeholder="请输入设备名称"
				prefixIcon="search"
				shape="circle"
				v-model="keyword"
				prefixIconStyle="font-size: 22px;color: #38c9b2"
			>
				<template slot="suffix">
					<u-button
						color="#38c9b2"
						@tap="search"
						text="搜索"
						type="success"
						shape='circle'
						size="mini"
					></u-button>
				</template>
			</u--input>
		</view>
		<view class="city">
			<view class="provice" @click="showProvince = true">
				{{ province_name ? province_name: '请选择省'}}
			</view>
			<view class="provice" v-if='city.length!=0' @click="showCity = true">
				{{ city_name? city_name: '请选择市'}}
			</view>
			<view class="provice" v-if='area.length!=0' @click="showArea = true">
				{{ area_name? area_name: '请选择'}}
			</view>
		</view>
		<u-picker :show="showProvince" :columns="[province]" keyName="name" @cancel='showProvince = false' @confirm='changeProvince'></u-picker>
		
		<u-picker :show="showCity" :columns="[city]" keyName="name" @cancel='showCity = false' @confirm='changeCity'></u-picker>
		
		<u-picker :show="showArea" :columns="[area]" keyName="name" @cancel='showArea = false' @confirm='changeArea'></u-picker>
		
		<view class="list">
			<view class="list_item" v-for="(item,index) in list" :key="index">
				<view class="flex top">
					<view class="left">
						<view class="">
							设备名称：{{ item.device_name}}
						</view>
						<view class="">
							设备编号：{{ item.macno}}
						</view>
						<view class="">
							设备地址：{{item.complete_address}}
						</view>
					</view>
					<view class="label-box">
						<view :style="{'background':item.smoke?'#ff6666':'#23c3aa'}">{{item.smoke?'烟感报警':'烟感正常'}}</view>
						<view v-if="item.disable" style="background:#ff6666;margin-top:.1rem">设备停用</view>
					</view>
				</view>
				<div class="box flex">
					<span class="text">容量状态：</span>
					<div class="tips flex">
						<div class="full flex" v-for="list in item.fullness_now" :key="list.id">{{list.name}} 
							<span class="number" 
								:style="{background:list.sum == 1?'#ff6666': '#23c3aa'}"
								v-if="list.status == 1"
							>
							{{list.sum == 0 ? '未满' : '已满'}}</span>
							<span class="number" 
								style="background:#ff6666"
								v-else
							>禁用</span>
						</div>
					</div>
				</div>
				<view class="btn">
					<u-button class="" text="监控列表" type="primary" @click='gotoVideo(item)'></u-button>
				</view>
				
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{
						name: '异常',
						key:0,
					},
					{
						name: '全部',
						key:1,
					}
				],
				status: 'loading',
				page: 1,
				pagesize: 10,
				list: [],
				ReachBottom: false,
				province: [],
				type: 0,
				showProvince: false,
				province_name: '',
				showCity: false,
				city: [],
				city_name: '',
				area: [],
				area_name: '',
				showArea: false,
				keyword: ''
			}
		},
		onLoad() {
			this.gethomeData()
		},
		onReachBottom() {
		
			let _self = this
			console.log('reach')
		
			uni.showNavigationBarLoading()
			// console.log('reach');
			if(_self.ReachBottom){
				_self.status = 'loading'
				setTimeout(function() {
					_self.page++;
					if(_self.type == 0){
						_self.gethomeData();
					}else{
						_self.getAll()
					}
					
					uni.hideNavigationBarLoading()
				}, 2000);
			}
			
		
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			console.log('refresh');
			setTimeout(function() {
				this.page = 1
				uni.stopPullDownRefresh(); //停止下拉刷新动画
				if(_self.type == 0){
					_self.gethomeData();
				}else{
					_self.getAll()
				}
			}, 1000);
		},
		methods: {
			search(){
				this.page = 1
				if(this.type == 0){
					this.gethomeData()
				}else{
					this.getAll()
				}
				
			},
			gotoVideo(item){
				uni.navigateTo({
					url: '/pages/admin/video?device_id='+item.device_id
				})
			},
			changeProvince(item){
				console.log(item)
				this.showProvince = false
				
				this.province_name = item.value[0].name
				this.city_name = ''
				this.area_name = ''
				this.page = 1
				if(this.type == 0){
					this.gethomeData()
				}else{
					this.getAll()
				}
			},
			changeCity(item){
				console.log(item)
				this.showCity = false
				this.city_name = item.value[0].name
				this.area_name = ''
				this.page = 1
				if(this.type == 0){
					this.gethomeData()
				}else{
					this.getAll()
				}
			},
			changeArea(item){
				console.log(item)
				this.showArea = false
				this.area_name = item.value[0].name
				this.page = 1
				if(this.type == 0){
					this.gethomeData()
				}else{
					this.getAll()
				}
			},
			tabClick(item){
				console.log('item', item);
				this.list = []
				this.page = 1
				this.type = item.key
				
				if(item.key == 1){
					this.getAll()
				}else{
					this.gethomeData()
				}
			},
			gethomeData(){
				var _this = this
				uni.request({
					url: 'http://www.yndzfl.cn/wxsite/Staff/deviceAbnormalList',
					method: 'POST',
					header:{
						"Content-Type" : "application/x-www-form-urlencoded"
					},
					data: {
						token: uni.getStorageSync('token'),
						page: _this.page,
						pagesize: _this.pagesize,
						province: _this.province_name,
						city: _this.city_name,
						area: _this.area_name,
						devname: _this.keyword
					},
					success(res) {
						console.log(res)
						if(res.data.code == 1){
							_this.province = res.data.data.province|| []
							_this.city = res.data.data.city || []
							_this.area = res.data.data.area || []
							if (res.data.data.list.length < 10) {
								_this.ReachBottom = false
								// uni.showToast({
								// 	title: '没有更多数据了',
								// 	icon: "none"
								// });
								_this.status = 'nomore'
							}else{
								_this.ReachBottom = true
								_this.status = 'loadmore'
							}
							if (_this.page != 1) {
								_this.list = _this.list.concat(res.data.data.list)
							} else {
								_this.list = res.data.data.list
							}
							
						}else if(res.data.code == -1){
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}else if(res.data.code == 408){
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							uni.reLaunch({
								url: '/pages/admin/login'
							})
						}	
					}
				})
			},
			getAll(){
				var _this = this
				uni.request({
					url: 'http://www.yndzfl.cn/wxsite/Staff/deviceList',
					method: 'POST',
					header:{
						"Content-Type" : "application/x-www-form-urlencoded"
					},
					data: {
						token: uni.getStorageSync('token'),
						page: _this.page,
						pagesize: _this.pagesize,
						province: _this.province_name,
						city: _this.city_name,
						area: _this.area_name,
						devname: _this.keyword
					},
					success(res) {
						console.log(res)
						if(res.data.code == 1){
							_this.province = res.data.data.province|| []
							_this.city = res.data.data.city || []
							_this.area = res.data.data.area || []
							if (res.data.data.list.length < 10) {
								_this.ReachBottom = false
								// uni.showToast({
								// 	title: '',
								// 	icon: "none"
								// });
								_this.status = 'nomore'
							}else{
								_this.ReachBottom = true
								_this.status = 'loadmore'
							}
							if (_this.page != 1) {
								_this.list = _this.list.concat(res.data.data.list)
							} else {
								_this.list = res.data.data.list
							}
							
						}
						
					}
				})
			}
		}
	}
</script>

<style scoped>
.tabs{
	background-color: #fff;
}
.list_item{
	background-color: #fff;
	margin-top: 10px;
	padding: 10px 0 10px 10px;
}
.flex{
	display: flex;
}
.top .left view{
	line-height: 30px;
	color: #333;
}
.label-box{
	color: #fff;
	/* padding: 0 10px; */
	width: 130px;
	text-align: center;
	margin-top: 10px;
}
.label-box view{
	border-radius: 15px 0 0 15px;
}
.text{
	width: 200px;
}
.tips{
	flex-wrap: wrap;
}
.full{
	margin-right: 15px;
	margin-top: 5px;
}
.number{
	display: inline-block;
	/* padding: 0 20px; */
	width: 45px;
	text-align: center;
	margin-left: 10px;
	font-size: 12px;
	border-radius: 10px;
	color: #fff;
}
.provice{
	margin-top: 10px;
	height: 50px;
	line-height: 50px;
	background: #fff;
}
.city{
	display: flex;
	/* flex-grow: 1; */
}
.city view{
	flex-grow: 1;
	text-align: center;
	margin-left: 5px;
}
.btn{
	margin-top: 10px;
	margin-right: 10px;
}
.search{
	padding: 20px 20px 10px 20px;
}
</style>
